import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import mockData from './data.json';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>111</span></span></h1>
// console.log(mockData)
//React卡槽：
// 组件中写入内容，这些内容会被识别和控制，react需要自己开发支持卡槽功能
// 原理：在组件写入的html可以通过props传递
// 组件中的HTML内容直接全部插入


// 定义用卡槽的父组件
class ParentCom extends React.Component{
  constructor(props){
    super(props);
    console.log('ParentCom组件中的props=>',props)
  };
  render(){
    return (
      <div className='parentCom'>
        <h1>这里是在父组件中使用卡槽</h1>
        <ChildrenCom>
          <h2 data-position='header'>这是放头部的卡槽位置<span> hello!</span></h2>
          <h3 data-position='body'>这是放正文内容的卡槽位置<del>23333</del></h3>
          <h4 data-position='footer'>这是放尾部的卡槽位置<mark>bhsbchd</mark></h4>
        </ChildrenCom>
      </div>
    )
  }
}

// 定义使用卡槽的子组件
class ChildrenCom extends React.Component{
  constructor(props){
    super(props);
    console.log('ChildrenCom中的props=>',props)
  };
  render(){
    let headSolt,bodySolt,footerSolt;
    this.props.children.forEach((item,index)=>{
      if(item.props['data-position']=='header'){
        headSolt = item;
      }else if(item.props['data-position']=='body'){
        bodySolt = item;
      }else if(item.props['data-position']=='footer'){
        footerSolt =item;
      }
    })
    return (
    <div className='childrenCom'>
      <div className='Solt1'>{headSolt}</div>
      <div className='Solt2'>{bodySolt}</div>
      <div className='Solt3'>{footerSolt}</div>
    </div>
    )
  }
};

// 定义一个根组件
class RootCom extends React.Component{
  constructor(props){
    super(props);
    this.state={
      soltData:[0,1,2]
    };
  }
  render(){
    return (
      <div>
        <ParentCom>
          <h1 data-name='data1' data-index={this.state.soltData[0]}>子组件1</h1>
          <h1 data-name='data2' data-index={this.state.soltData[1]}>子组件2</h1>
          <h1 data-name='data3' data-index={this.state.soltData[2]}>子组件3</h1>
        </ParentCom>
      </div>
    )
  }
}

ReactDOM.render(
 <RootCom></RootCom>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
